<template>
	<view class="root">
		<view v-if="showSearch" class="base-padding mgb-30upx">
			<search target="/pages/search/search" />
		</view>

		<view v-if="banners.length>0" class="base-padding base-margin-bottom">
			<swiper :style="'height:'+bannerHeight" :autoplay="autoplay" :indicator-dots="indicatorDots" :interval="interval"
			 :duration="duration">
				<swiper-item v-for="banner in banners" :key="banner.data" class="radius-basic">
					<image @click="bannerClick" :data-url="'/pages/intro/intro?id='+banner.data" :src="banner.image" :style="'height:'+bannerHeight+';width:'+bannerWidth"></image>
				</swiper-item>
			</swiper>
		</view>

		<!--  推荐  -->
		<view v-if="recommendBooks.books.length>0" class='panel base-padding recommend base-margin-bottom'>
			<view class='panel-heading'>
				<view class='panel-title font-lv1 strong'>{{recommendBooks.title}}</view>
			</view>
			<view class='panel-body'>
				<scroll-book :books="recommendBooks.books" :width="bannerWidth"></scroll-book>
			</view>
		</view>

		<!--  各种分类的书籍的展示  -->
		<block v-for="category in bookLists" :key="category.key">
			<view v-if="category.books" class='panel base-padding base-margin-bottom'>
				<view class='panel-heading'>
					<view class='panel-title font-lv1 strong'>
						{{category.title}}
						<!-- <navigator :url="'/pages/list/list?tab=new&cid='+category.key" class='pull-right color-link font-lv3'>更多</navigator> -->
						<text style="float: right;color: #b2b2b2;line-height: 25px;font-size: 12px;" @click="refresh(category.key)">换一批 ∝</text>
					</view>
				</view>
				<view class='panel-body'>
					<list-book :books="category.books" />
				</view>
			</view>
		</block>

	</view>


</template>

<script>
	import scrollBook from '../../components/scrollBook.vue'
	import search from '../../components/search.vue'
	import listBook from '../../components/listBook.vue'

	import api from '../../utils/api.js'
	import util from '../../utils/util.js'
	import config from '../../config.js'

	export default {
		components: {
			scrollBook,
			search,
			listBook,
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				bannerWidth: '100%',
				bannerHeight: 'auto',
				showSearch: false, // 内容完全加载完成之后再显示搜索框
				banners: [],
				categoryBooks: [],
				recommendBooks: [],
				bookLists: [],
				times: 100, // 当iOS未允许访问网络的时候，没3秒请求一次数据
			}
		},
		onLoad() {
			let info = util.getSysInfo()
			// this.bannerWidth = info.bannerWidth + "px"
			// this.bannerHeight = info.bannerHeight + "px"
			// if (config.debug) console.log(this.bannerWidth, this.bannerHeight)
			this.loadData()
		},
		onShow() {
			// if (this.categoryBooks.length == 0) {
			// 	this.loadData()
			// }
		},
		onPullDownRefresh() {
			this.loadData()
		},
		methods: {
			loadData() {
				// #ifdef MP
				util.loading('玩命加载中...')
				// #endif
				let that = this
				
				let banners = []
				let recommendBooks = []
				let bookLists = []
				var user = util.getUser()
				Promise.all([util.request(config.api.banners, {
					type: (user && user.sex) ? 'male': 'female'
				}), util.request(config.api.recommandLists, {
					page: 1,
					size: 12,
					type: (user && user.sex) ? 'male': 'female'
				})]).then(function([resBanners, resRecommendBooks]) {
					if (config.debug) console.log(resBanners, resRecommendBooks)
					if (resBanners.data) {
						banners = resBanners.data
			
						// 计算横幅合适的宽高
						// 转成 upx，因为两边边距设置为 30upx
						let size = resBanners.data.size || 3
						let info = util.getSysInfo()
						let width = info.windowWidth * info.pixelRatio - 60
						let height = width / size
						that.bannerWidth = width / info.pixelRatio + "px"
						that.bannerHeight = height / info.pixelRatio + "px"
					}
					if (resRecommendBooks.data){
						recommendBooks = resRecommendBooks.data[0]
						bookLists = resRecommendBooks.data.slice(1, resRecommendBooks.data.length)
					}
				}).catch(function(e) {
					console.log(e)
				}).finally(function() {
					that.banners = banners
					that.recommendBooks = recommendBooks
					that.bookLists = bookLists
					that.showSearch = true
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			refresh(key) {
				// #ifdef MP
				util.loading('玩命加载中...')
				// #endif
				let that = this
				
				let banners = []
				let recommendBooks = []
				let bookLists = []
				var user = util.getUser()
				util.request(config.api.recommandListsByKey + key, {
					type: (user && user.sex) ? 'male': 'female'
				}).then((res) => {
					uni.hideLoading()
					if(res && res.data) {
						that.bookLists.forEach(bookList => {
							if(bookList.key == key) {
								bookList.books = res.data
							}
						})
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			bannerClick(e) {
				if (config.debug) console.log("banner click", e)
				let url = e.target.dataset.url
				if (!url) return

				// #ifdef MP
				uni.navigateTo({
					url
				})
				// #endif

				// APP or H5
				// #ifndef MP
				if (String(url).indexOf("http://") > -1 || String(url).indexOf("https://") > -1) {
					plus.runtime.openURL(url) // 调用外部浏览器打开
					// plus.runtime.openWeb(url) // app 内打开
				} else {
					uni.navigateTo({
						url
					})
				}
				// #endif
			}
		}

	}
</script>

<style>

</style>
